<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 换绑手机 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-6 p-4">
      <view class="text-[1.75rem] text-[#161A24] font-medium"> 验证手机号</view>
      <view class="w-full h-[3rem] bg-[#FFFFFF] rounded-[.5rem] flex items-center gap-2">
        <view class="w-[3.75rem] text-[.9375rem] text-[#161A24] font-medium flex justify-center">+86</view>
        <input type="tel" class="flex-1" focus v-model="phoneNumber" placeholder="请输入手机号码" maxlength="11" />
        <view class="flex items-center px-4">
          <image
            src="/static/dddr42.png"
            v-if="phoneNumber"
            class="size-4"
            mode="aspectFill"
            @click="phoneNumber = ''"
          />
        </view>
      </view>
      <view
        class="w-full h-[2.75rem] bg-[#99DBDC] rounded-full flex justify-center items-center btn"
        :style="{ backgroundColor: isValidMobile ? '#00A9AB' : '#99DBDC' }"
        @click="sendSms"
      >
        <view class="text-[1rem] text-[#E5F6F6] font-medium">获取验证码 </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        phoneNumber: '' // 手机号
      }
    },
    computed: {
      isValidMobile() {
        return this.phoneNumber.length === 11
      }
    },
    methods: {
      async sendSms() {
        vk.pubfn.debounce(async () => {
          if (!this.phoneNumber) return vk.toast('请输入手机号码')
          if (!vk.myfn.validatePhone(this.phoneNumber)) return vk.toast('请输入正确的手机号码')
          vk.showLoading('发送中...')
          let res = await api.sendSms({
            mobile: this.phoneNumber,
            template_code: 'user_change_mobile'
          })
          vk.hideLoading()
          if (!res.code) return vk.toast(res.msg)
          vk.navigateTo(`/pages/my/verificationCode?mobile=${this.phoneNumber}&type=1`)
        }, 1000)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
